<template>
  <div style="width: 100%; height: 100%; min-height: 300px" />
</template>
<script>
import { getBarChart } from "@/api/hades/homepage/homepage";
//import Util from '@/utils/activiti/myUtil'
// 引入基本模板
var echarts = require("echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  props: {
    width: {
      type: Number,
      default: 0,
    },
    year: {
      type: String,
      default: "",
    },
    resId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chart: null,
      xAxisData: [],
      gsData: [],
      xmData: [],
    };
  },
  watch: {
    width: function (val, oldVar) {
      this.refreshChart();
    },
    year: function (val, oldVar) {
      this.initChartData();
    },
  },
  created() {
    this.initChartData();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    refreshChart() {
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.dispose();
        }
        this.chart = null;
        this.initChart();
      });
    },
    initChartData() {
      this.$nextTick(() => {
        this.initChart();
      });
    },
    initChart() {
      let params = {
        type: 1,
      };
      getBarChart(params).then((response) => {
        let source = [
          {
            分类: "物业类",
            政务服务热线服务平台: 12,
            省住建厅官网厅长信箱: 44,
            人民网领导留言板: 62,
          },
          {
            分类: "建管类",
            政务服务热线服务平台: 2,
            省住建厅官网厅长信箱: 33,
            人民网领导留言板: 44,
          },
          {
            分类: "消防类",
            政务服务热线服务平台: 11,
            省住建厅官网厅长信箱: 3,
            人民网领导留言板: 66,
          },
          {
            分类: "质安类",
            政务服务热线服务平台: 22,
            省住建厅官网厅长信箱: 34,
            人民网领导留言板: 12,
          },
          {
            分类: "市政类处",
            政务服务热线服务平台: 20,
            省住建厅官网厅长信箱: 30,
            人民网领导留言板: 11,
          },
          {
            分类: "城市管理",
            政务服务热线服务平台: 25,
            省住建厅官网厅长信箱: 74,
            人民网领导留言板: 34,
          },
          {
            分类: "房产类",
            政务服务热线服务平台: 12,
            省住建厅官网厅长信箱: 54,
            人民网领导留言板: 12,
          },
          {
            分类: "乡村建设类",
            政务服务热线服务平台: 12,
            省住建厅官网厅长信箱: 45,
            人民网领导留言板: 86,
          },
          {
            分类: "其他类",
            政务服务热线服务平台: 32,
            省住建厅官网厅长信箱: 23,
            人民网领导留言板: 86,
          },
        ];
        // let source = response.data;
        let dataset = {
          dimensions: ["分类", "政务服务热线服务平台", "省住建厅官网厅长信箱", "人民网领导留言板"],
          // dimensions: [
          //   { name: "categoryName", displayName: "分类" },
          //   { name: "hotline", displayName: "政务服务热线服务平台" },
          //   { name: "mailbox", displayName: "省住建厅官网厅长信箱" },
          //   { name: "message", displayName: "人民网领导留言板" },
          // ],
          source,
        };

        let color = [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#458CE9", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#2E85FF", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#6AE9CF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#37C1A5", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#5BB7DE", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#53AFD6", // 100% 处的颜色
              },
            ],
          },
        ];

        // 基于准备好的dom，初始化echarts实例
        this.chart = echarts.init(this.$el, "letterbytype"); //echarts.init(document.getElementById('myChart'))
        // 绘制图表
        this.chart.setOption({
          dataset,
          color,
          tooltip: {
            trigger: "axis",
          },
          legend: {
            right: "5%",
            top: "0%",
          },
          grid: {
            left: "5%", //图表距边框的距离
            right: "5%",
            top: "12%",
            bottom: "15%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            axisLabel: {
              color: "#000000",
              //              fontWeight: "bold"
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#000000",
                width: "1",
                type: "solid",
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#000000",
              },
            },
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              color: "#000000",
            },
          },
          series: [
            {
              type: "bar",
              barWidth: "10%",
            },
            {
              type: "bar",
              barWidth: "10%",
            },
            {
              type: "bar",
              barWidth: "10%",
            },
          ],
        });
      });
    },
  },
};
</script>
<style></style>
